<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>渐变背景</title>
</head>
<body><p class="a"></p>
    <p class="b"></p>
    <p class="c"></p>
    <p class="d"></p>
    <p class="f"></p>
    <style>.a{
        width: 200px;
        height: 200px;;background-image:linear-gradient(90deg,yellow,orange,25%,purple);
}
          .b{
        width: 200px;
        height: 200px;
        background-image:repeating-linear-gradient(54deg,red,orange,yellow,green,blue 50%);
        position: fixed;top: 210px;}
        .c{
        width: 200px;
        height: 200px;
        background-image:radial-gradient(circle,yellow,green);
        position: fixed;top: 420px;}
        .f{
        width: 200px;
        height: 200px;
        background-image:repeating-radial-gradient(circle,rgb(15, 207, 104),rgb(32, 38, 113));
        position: fixed;top: 640px;}
</style>

    
</body>
</html>